<template>
  <div class="teacherList">
    <h1>教学计划执行</h1>
    <div class="infinite-list-wrapper" style="overflow: auto">
      <el-table
        :data="tableData"
        v-infinite-scroll="load"
        infinite-scroll-disabled="disabled"
      >
        <el-table-column prop="courseName" label="课程名称" border>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="InformationFilling(scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <p v-if="loading" style="text-align: center">加载中...</p>
      <p v-if="noMore" style="text-align: center">没有更多了</p>
    </div>
  </div>
</template>
<script>
import {
  teachingPlanExecutionPaging,
  teachingPlanExecutionGet,
  teachingPlanExecutionDelete,
  teachingPlanExecutionSave,
  teachingPlanExecutionUpdate,
} from "@/api/OneStageOneGear/OneStageOneGear.js";
export default {
  name: "TeacherList",
  data() {
    return {
      queryParams: {
        current: 1,
        orderBy: "",
        params: {
          courseName: "",
          hours: "",
          id: "",
          teacherGraduatingSchool: "",
          teacherMajor: "",
          teacherName: "",
          teacherSignature: "",
          teacherTeachingMajor: "",
          teacherTitle: "",
          teacherWorkplace: "",
          textbook: "",
          trainingClassInfoId: this.$route.query.id,
        },
        size: 10,
      },
      tableData: [],
      totle: 0,
      loading: false,
    };
  },
  computed: {
    noMore() {
      let num = this.totle / this.queryParams.size;
      num = Math.ceil(num);
      return this.queryParams.current >= num;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await teachingPlanExecutionPaging(this.queryParams);
      console.log(res);
      if (res.code == 200) {
        res.data.records.forEach((item) => {
          this.tableData.push(item);
        });
      }
      this.totle = res.data.total;
    },
    InformationFilling(row) {
      this.$router.push({
        path: "/TeacherUpdate",
        query: {
          id: row.id,
          courseName: row.courseName,
          trainingClassInfoId: this.$route.query.id,
          trainingClassScheduleId: row.trainingClassScheduleId,
        },
      })
    },
    load() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.queryParams.current++;
        this.getList();
      }, 2000);
    },
  },
};
</script>
<style lang="less" scoped>
.teacherList {
  padding: 10px;
  height: 100%;
  background: rgba(251 250 250);
  h1 {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
  }
}
</style>
